<template>
    <div class="dataC">
        <div class="dataC_d" v-for="(item, index) in data">
            <img class="dataC_d_img" :src="item.src" alt="" srcset="">
            <div class="dataC_right">
                <p class="dataC_right_buttom">{{ item.title }}</p>
                <div class="flex dataC_right_top">
                    <p class="dataC_right_p1" v-if="item.bool">{{ item.number }}<span v-if="item.unit == '%'"
                            class="dataC_right_p1_span">{{
                                item.unit
                            }}</span>
                        <span v-else class="dataC_right_p2_span">{{
                            item.unit
                            }}</span>
                    </p>
                    <p class="dataC_right_p2" v-else>{{ item.number }}
                        <span class="dataC_right_p2_span">{{ item.unit }}</span>
                    </p>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
    }
}
</script>
<style lang="scss" scoped>
.dataC {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .dataC_d {
        display: flex;

        .dataC_d_img {
            margin-top: 5.5px;
            width: 54px;
            height: 54px;
        }
    }

    .dataC_right {
        width: 112px;
        height: 35px;
        padding: 15px 0px 15px 20px;
        background: url("@/assets/Data/组 102b.png");

        .dataC_right_top {
            p {
                margin: 6px 0 ;
                font-family: DIN;
                font-weight: 500;
                font-size: 14px;

            }

            .dataC_right_p1 {
                color: #F89E29;

                .dataC_right_p1_span {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 16px;
                    color: #F89E29;
                }

                .dataC_right_p2_span {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #D0E5F5;
                }
            }

            .dataC_right_p2 {
                color: #4DF7FF;

                .dataC_right_p2_span {
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #D0E5F5;
                }
            }

        }

        .dataC_right_buttom {
            margin: 0;
        }
    }
}
</style>